﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:include value="/comm/header.jsp" />
<s:include value="/comm/menu.jsp"/>
<!--第2部分开始  --> 
    <div class="wrap1">
    	<div class="blank1"></div>
        
    	<div class="top3">
        
<!--左边开始  -->
        	<div class="wrap_left">
            	<div class="w_box4">


<div class="detail_box">
	<!--商品详情开始 -->
    <div class="detail_tt"><s:property value="canBuyModel.goodsName" /></div>
    <div class="detail_p">
    	<div class="wrap_left">



<!--图片展示开始 -->
<div id="preview" >
	<div class="jqzoom" id="spec-n1" onClick="window.open('http://')">
    <IMG src="<s:property value='canBuyModel.absoluteImages[0]' />" jqimg="<s:property value='canBuyModel.absoluteImages[0]' />" onload='javascript:DrawImage(this,300,300)'>
	</div>
	<div id=spec-n5>
		<div class=control id=spec-left>
			<img src="images/left.gif" />
		</div>
		<div id=spec-list>
			<ul class=list-h>
				<s:iterator value="canBuyModel.absoluteImages" id="number">
					<li><img src="<s:property value='number' />"  onload='javascript:DrawImage(this,50,50)'></li>
				</s:iterator>
			</ul>
		</div>
		<div class=control id=spec-right>
			<img src="images/right.gif" />
		</div>
		
    </div>

    
    
    
    
    
</div>
<!--图片展示结束 -->



        </div>
        <div class="wrap_left">
        
        
<div class="detail_box2">
价格：<span class="span2">￥<s:property value="canBuyModel.price" /></span><br />
佣金：<span class="span19">￥<s:property value="canBuyModel.serviceFee" /> </span><br />
国内市场价：<span class="span19 sspan">￥<s:property value="canBuyModel.domesticPrice" /></span><br />
运费：<span class="span19">￥<s:property value="canBuyModel.shippingCost" /></span><br />
所在区域：<s:property value="canBuyModel.areaName" /><br />
已有<s:property value="canBuyModel.transNum" />人代购
</div>  

<s:if test="#session.user == null || canBuyModel.user.userid != #session.user.userid">
<div class="detail_box3" id="detail_box">
<s:form id="form1" method="post" action="entrust">
	<input id="canId" type="hidden" name="transInfoModel.canId" value="<s:property value='canBuyModel.canId' />" />
	<span class="span32">
		代购数量：
		<input id="itemNumber" name="number" type="text" size="1" value="1" class="input1" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
		<br/>
		<label id="itemNumberPrompt" style="display: none; color:red">请填写正确的数量</label>
	</span>
	<span class="span30">
		<a href="javascript:purchase();">委托代购</a>
	</span>
	&nbsp;

<script type="text/javascript">
function showDiv(){
document.getElementById('pbox_dgc').style.display='block';
document.getElementById('fixbg_dgc').style.display='block';
}

function closeDiv(){
document.getElementById('pbox_dgc').style.display='none';
document.getElementById('fixbg_dgc').style.display='none';
}
</script>

	<span class="span31" >
		<a href="javascript:addItem()">加入代购车</a>
	</span>
</s:form>
</div> 
</s:if>  

<div class="pbox_dgc" id="pbox_dgc">
        
         <div class="wrap_right">
            <p><a href="javascript:closeDiv()">关闭</a></p>
    	 </div>
         
         <div class="wrap_left">           
            <dl>
              <dt><img src="images/bg_but_de3.png"  border="0"/></dt>
              <dd><span>该商品已成功放入</span>代购车</dd>
              <dd>代购车共x件商品 合计：x元</dd>
              <dd class="end"><em><a href="#">去结算 &gt;&gt;</a></em><a href="#">&lt;&lt; 继续购物</a></dd>
              
            <dl>
         </div>
        
        </div>
        <div id="fixbg_dgc" class="fixbg_dgc" style="display:none;">			
</div>

<div class="detail_box4">
	<ul>
		<li>所属类别：<s:property value="canBuyModel.categoryName" /></li>
    	<li>
    		可提供票据类型：
    		<s:if test="canBuyModel.receipts == 1">小票</s:if>
            <s:elseif test="canBuyModel.receipts == 2">发票</s:elseif>
            <s:elseif test="canBuyModel.receipts == 3">发票或小票</s:elseif>
        </li>
        <div class="clear"></div>
		<li>发布经纪人：<a href ="brokerDetail.htm?id=<s:property value='canBuyModel.user.userid' />"><s:property value="canBuyModel.user.nickName" /></a></li>
		<li>
			来源：
            <s:if test="canBuyModel.source == 1">大型超市</s:if>
            <s:elseif test="canBuyModel.source==2">便利店</s:elseif>
            <s:elseif test="canBuyModel.source==3">专卖店</s:elseif>
            <s:elseif test="canBuyModel.source==4">生产厂家</s:elseif>
            <s:else>其他</s:else>
		</li>
        <div class="clear"></div>
        <li>关键字：<s:property value="canBuyModel.description" /></li>
        <li>
        	运输方式：
        	<s:if test="canBuyModel.transportMode == 1">快递</s:if>
        	<s:elseif test="canBuyModel.transportMode == 2">EMS</s:elseif>
        	<s:else>平邮</s:else>
        </li>
        <div class="clear"></div>
	</ul>
</div>


        </div>
        <div class="clear"></div>
    </div>
    
    
    <!--商品详情结束 -->
</div>


<div class="blank1"></div>


<!--选项卡开始--> 	
<div id="mainTabbox">
 	<div id="tabbox1">
		<ul>
			<li id="taba1" onclick="setTab('taba',1,4)" class="hover"><a>详情</a></li>
			<li id="taba2" onclick="javascript:queryTrans(1, <s:property value='canBuyModel.canId' />);"><a>代购记录</a></li>
			<li id="taba3" onclick="javascript:queryEvaluates(1, <s:property value='canBuyModel.canId'/>);"><a>评价信息</a><span class="hot-tip" style="  z-index:100px; top:-25px;left:60px !important;left:-40px "></span></li>
            <li id="taba4" onclick="setTab('taba',4,4)"><a>服务保障</a></li>
 		</ul>
 
	</div>
 	<div id="conten">
      <div>
 		<div class="tab_show" id="con_taba_1">
      		<s:property value="canBuyModel.details"/> 
 		</div>
 		<div class="tab_show" id="con_taba_2">
        
        <!--列表开始-->
            <div class="my_cont2">
                <div class="my07_cont_box">
                    	<ul id="transInfos">
                        </ul> 
						<div class="clear"></div>
                </div>
            </div> 
        <!--列表结束-->

        
        
 		</div>
 		<div class="tab_show" id="con_taba_3">
  			
    	</div>
        <div class="tab_show" id="con_taba_4">
        	<s:property value="canBuyModel.serviceAssurance" />
        
       </div>

        
      </div>
      
 	</div>
 </div>
<!--选项卡结束-->     



              </div>
            </div>
<!--左边结束  --> 
       
<!--右边开始  -->
            <div class="wrap_right">
            	<div class="w_box5">


					<div class="list_tt1">
                		<span class="span6">该经纪人发布的其他代购信息</span>
                    </div>
                    <div class="outbox2">


						<div class="detail_list1">
							<ul>
								<s:iterator value="otherCanBuys">
									<li>
                    					<div class="wrap_left">
                    						<span class="showpic3"><img src="<s:property value='images[0]' />" onload='javascript:DrawImage(this,35,35)'/></span>
                    					</div>
                						<div class="wrap_left">
                						<div class="my05_cont2">
                							<span>
                								<a href="canBuyDetail.htm?canBuyModel.canId=<s:property value='canId' />"><s:property value="goodsName" /></a>
                							</span>
                							<br />
                							<span class="span1">代购价：</span><span class="span18">￥<s:property value="price" /></span></div>
                						</div>
                						<div class="clear"></div>
                    			</li>
								</s:iterator>
							</ul>
                        </div>

                    </div>
                    <div class="blank1"></div>
                </div>
            </div>   
<!--右边结束  -->
            
            <div class="clear"></div>
        </div>

    </div>
    
 <!--第2部分结束  -->   

<SCRIPT type=text/javascript>
	$(function(){			
	   $(".jqzoom").jqueryzoom({
			xzoom:400,
			yzoom:400,
			offset:10,
			position:"right",
			preload:1,
			lens:1
		});
		$("#spec-list").jdMarquee({
			deriction:"left",
			width:350,
			height:56,
			step:2,
			speed:4,
			delay:10,
			control:true,
			_front:"#spec-right",
			_back:"#spec-left"
		});
		$("#spec-list img").bind("mouseover",function(){
			var src=$(this).attr("src");
			$("#spec-n1 img").eq(0).attr({
				src:src.replace("\/n5\/","\/n1\/"),
				jqimg:src.replace("\/n5\/","\/n0\/")
			});
			$(this).css({
				"border":"2px solid #ff6600",
				"padding":"1px"
			});
		}).bind("mouseout",function(){
			$(this).css({
				"border":"1px solid #ccc",
				"padding":"2px"
			});
		});				
	})
	</SCRIPT>
<s:include value="/comm/bottom.jsp"/>



<script type="text/javascript">

	$("#itemNumber").focus(function(){$("#itemNumberPrompt").hide();});
	$("#itemNumber").blur(function(){if (!digitRegex.test($(this).val())){$("#itemNumberPrompt").show();}});
	
	function queryTrans(curPage, canId) {
		setTab('taba',2,4);
		$.ajax({
			url:'queryTrans.htm',
			type:'post',
			data:{"transInfoModel.canId":canId, "suerPage":curPage},
			success:showTrans
		});	
	}
	
	function showTrans(json) {
		var transInfos = json.transInfoModels;
		if (transInfos.length == 0) {
			$("#transInfos").html("暂无代购记录");
		}
		else {
			var transInfoModel = json.transInfoModel;
			var param  = "transInfoMOdel.canId=" + transInfoModel.canId;
			var html = "<li class='t1'>名称</li>";
			html += "<li class='t2'>雇主</li>";
			html += "<li class='t3'>代购数量</li>";
			html += "<li class='t4'>委托时间</li>";
			html += "<li class='t5'>状态</li>";
         	for (var i = 0; i < transInfos.length; i++) {
         		var transInfo = transInfos[i];
         		html += "<li class='t1'>" + transInfo.goodsName  + "</li>";
         		html += "<li class='t2'><a href='#' target='_blank'>" + transInfo.wantUserModel.nickName + "</a></li>";
         		html += "<li class='t3'>" + transInfo.number + "</li>";
         		html += "<li class='t4'><span class='span17'>" + transInfo.startTime + "</span></li>";
         		var statusName = "";
         		if (transInfo.status == 0) {
         			statusName = "待支付";
         		}
         		else if (transInfo.status = 1) {
         			statusName = "待发货";
         		}
         		else if (transInfo.status == 2) {
         			statusName = "确认收货";
         		}
         		else if (transInfo.status  == 3) {
         			statusName = "待评价";
         		}
         		else if (transInfo.status == 4) {
         			statusName = "交易完成";
         		}
         		else if (transInfo.status == 5) {
         			statusName = "申诉中";
         		}
         		else  {
         			statusName = "处理完成";
         		}
         		html += "<li class='t5'>" + statusName + "</li>";
         	}   
         	$("#transInfos").html(html);
		}
	}

	function queryEvaluates(curPage, canId) {
		setTab('taba',3,4);
		$.ajax({
			url:'queryEvaluates.htm',
			type:'post',
			data:{"evaluateModel.canId":canId, "suerPage":curPage},
			success:showEvaluates
		});	
	}
	
	function showEvaluates(json) {
		var evaluates = json.evaluateModels;
		var html = "";
		if (evaluates.length == 0) {
			html += " <div class='my_cont2'>";
			html += "暂无评价信息";
			html += "</div>";
			$("#con_taba_3").html(html);
		}
		else {
			html += "<div class='wrap_left'>综合评价：<span class='span18'>" + json.avgEvaluate + "</span></div>";
			html += "<div class='process-bar skin-red'>";
			html += "<div class='pb-wrapper'>";
			html += "<div class='pb-highlight'></div>";
			html += "<div class='<div class='pb-container'>";
			html += "<div class='pb-text'>" + json.avgEvaluate + "</div>";
			var percent = json.avgEvaluate / 5 * 100;
			html += "<div class='pb-value' style='width:" + percent + "%'></div>";
			html += "</div></div></div>";
			html += "</div>";
			html += "<div class='clear'></div>";
			html += "</div>";
			html += " <div class='my_cont2'>";
			for (var i = 0; i < evaluates.length; i++) {
				html += "<div class='my04_cont_box'>";
				html += "<div class='wrap_left'>";
				html += "<span class='span15'><a href='#''>" + evaluates[i].info + + "</a></span>&nbsp;&nbsp;";
				html += "<span class='span16'>来自：" + evaluates[i].user.nickName + "</span>";
				html += "</div>";
				html += "<div class='wrap_right'><span class='span17'>" + evalutes[i].ts + "</span></div>";
				html += "<div class='clear'></div>";
				html += "</div>";
			}
			$("#con_taba_3").html(html);
		}		  
	}
	
	function purchase() {
		var number = $("#itemNumber").val();
		if (!digitRegex.test(number)) {
			$("#itemNumberPrompt").show();
			return;
		}
		var userObj = "${sessionScope.user}";
		if(userObj == '' && !bLogin){
			to = 8;
			showLogin();
		}else {
			var userId = "${requestScope.canBuyModel.user.userid}";
			if (userId == lUserId) {
				$("#detail_box").hide();
			}
			else {
				$("#form1").submit();	
			}
		}
		
	}
	
	function addItem() {
		var number = $("#itemNumber").val();
		if (!digitRegex.test(number)) {
			$("#itemNumberPrompt").show();
			return;
		}
		
		var userObj = "${sessionScope.user}";
		if(userObj == '' && !bLogin){
			to = 9;
			showLogin();
		}else{
			var userId = "${requestScope.canBuyModel.user.userid}";
			if (userId == lUserId) {
				$("#detail_box").hide();
			}
			else {
				var canId = $("#canId").val();
				$.ajax({
					url:'addItem.htm',
					data:{"number":number,"canBuyModel.canId":canId},
					success:function(json) {
						if (json.ajaxSuccess) {
							$("#cartNum").html(json.cartsNum);
						}
					}			
				});
			}
		}
	}
</script>